<template>
    <div class="ac-list">
        <page-title :title="title"></page-title>
        <div class="ac-box" v-for="(item,index) in page.list" :key="index">
            <router-link :to="{path:'activity',query:{activityId:item.id}}">
                <div class="img" v-if="item.main_view">
                    <swiper :aspect-ratio="1/2" :show-dots="false" loop auto class="ac-swiper">
                        <img :src="item.main_view">
                    </swiper>
                </div>
                <h3 class="title">{{item.out_name}}</h3>
                <p class="time">{{item.create_time}}</p>
                <!-- 标记活动状态，待定 -->
                <!-- <div class="status">
                    <i v-if="nowDate < item.startTime && nowDate < item.endTime" class="icon-notbegun"></i>
                    <i v-else-if="item.startTime <= nowDate && nowDate <= item.endTime" class="icon-underway"></i>
                    <i v-else-if="item.endTime < nowDate && item.startTime < nowDate" class="icon-over"></i>
                </div> -->
            </router-link>
        </div>
        <infinite-loading @infinite="infiniteHandler">
            <span slot="no-more">
                没有更多了...
            </span>
        </infinite-loading>
    </div>
</template>

<script>
import { Scroller, Swiper, LoadMore, SwiperItem, Divider } from 'vux'
import { findActivityList } from '@/api/activity';
import InfiniteLoading from 'vue-infinite-loading';
export default {
    data() {
        return {
            params: this.$route.query.params,
            title: this.$route.query.title,
            pullupConfig: {
                content: '',
                downContent: '',
                upContent: '',
                loadingContent: '加载中...'
            },
            nowDate: +new Date(),
            onFetching: false,
            page: {
                lastPage: false,
                totalRow: null,
                pageNumber: 1,
                pageSize: 10,
                list: []
            }

        }
    },
    components: {
        Swiper,
        LoadMore,
        InfiniteLoading,
    },
    methods: {
        //上拉刷新
        async infiniteHandler($state) {
            if (!this.onFetching) {
                this.onFetching = true
                await findActivityList(this.params, this.page.pageNumber, this.page.pageSize).then(res => {
                    this.page.list = this.page.list.concat(res.page.list)
                    this.onFetching = false
                    $state.loaded();
                    if (res.page.totalPage <= this.page.pageNumber) {
                        $state.complete();
                        this.onFetching = true
                    }
                    this.page.pageNumber++
                }).catch(() => {
                    this.onFetching = false
                })
            }
        },
    },
    created() {
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
/* .ac-list { */
/* height: 300px;*/
/* overflow: hidden; */
/* } */
</style>
